<template>
  <!-- <el-row v-if="detail" align="middle" justify="center" class="template-detail-layout">
    <el-col :span="9">
      <el-image :src="detail.cover" lazy class="detail-poster" />
    </el-col>
    <el-col :span="9" :offset="1" class="detail-right-layout">
      <h3 class="detail-title">{{ detail.title }}</h3>
      <b>未命名作品</b>
      <div class="detail-avatar">
        <el-avatar :src="detail.cover" :size="32" shape="circle" fit="cover" />
        <div style="padding: 24px">
          该模板由&nbsp; <b>{{ detail.author }}</b> &nbsp;创作
        </div>
      </div>
      <div class="btn-group">
        <router-link v-slot="{ navigate }" to="/template-editor" custom>
          <el-button type="primary" round @click="navigate">使用模板</el-button>
        </router-link>
        <el-button round plain>下载图片海报</el-button>
      </div>
    </el-col>
  </el-row> -->
  <a-row v-if="detail" align="middle" justify="center" class="template-detail-layout">
    <a-col :span="9">
      <a-image :src="detail.cover" class="detail-poster" />
    </a-col>
    <a-col :span="9" :offset="1" class="detail-right-layout">
      <h3 class="detail-title">{{ detail.title }}</h3>
      <b>未命名作品</b>
      <div class="detail-avatar">
        <a-avatar
          :src="detail.cover"
          :size="32"
          shape="circle"
          :draggable="false"
          :load-error="() => true"
        />
        <div style="padding: 24px">
          该模板由&nbsp; <b>{{ detail.author }}</b> &nbsp;创作
        </div>
      </div>
      <div class="btn-group">
        <router-link v-slot="{ navigate }" to="/template-editor" custom>
          <a-button type="primary" shape="round" @click="navigate">使用模板</a-button>
        </router-link>
        <a-button type="primary" shape="round" ghost>下载图片海报</a-button>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { getTemplateDetail, ITemplateItem } from '../../http/api';

const route = useRoute();
const templateId = computed(() => route.params.templateId);

const detail = ref<ITemplateItem | null>(null);
getTemplateDetail(templateId.value as string).then((data) => {
  // console.log(data);
  detail.value = data;
});
</script>

<style scoped>
.template-detail-layout {
  height: calc(100vh - 50px);
  padding: 24px;
}
/* .detail-poster {} */
.btn-group {
  display: flex;
  align-items: center;
}
.detail-right-layout {
  height: 500px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
}
.detail-title {
  font-size: 30px;
  margin: 0;
}
.detail-avatar {
  display: flex;
  align-items: center;
}
</style>
